<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<md-step label="General" md-complete="$ctrl.parent.vm.stepData[0].data.completed">
  <md-step-body>
    <md-content layout-padding class="gv-creation-general-content gv-creation-content">
      <div ng-if="$ctrl.canUseAdvancedMode()" layout="row" layout-align="end start">
        <a ng-click="$ctrl.toggleAdvancedMode()">Advanced mode</a>
      </div>
      <form name="apiGeneralForm" ng-submit="$ctrl.parent.validFirstStep($ctrl.parent.vm.stepData[0].data)">
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Name</label>
            <input ng-model="$ctrl.parent.api.name" type="text" required name="name" md-maxlength="512" autofocus />
            <div class="hint" ng-if="$ctrl.shouldDisplayHint(apiGeneralForm.name)">API Name</div>
            <div ng-messages="apiGeneralForm.name.$error">
              <div ng-message="required">API Name is required.</div>
              <div ng-message="md-maxlength">The name has to be less than 50 characters long.</div>
            </div>
          </md-input-container>
          <md-input-container class="md-block">
            <label>Version</label>
            <input ng-model="$ctrl.parent.api.version" type="text" md-maxlength="32" required name="version" />
            <div class="hint" ng-if="$ctrl.shouldDisplayHint(apiGeneralForm.version)">API Version (ex: 1.0)</div>
            <div ng-messages="apiGeneralForm.version.$error">
              <div ng-message="required">API Version is required.</div>
              <div ng-message="md-maxlength">The version has to be less than 32 characters long.</div>
            </div>
          </md-input-container>
        </div>

        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Description</label>
            <input ng-model="$ctrl.parent.api.description" type="text" required name="description" />
            <div class="hint" ng-if="$ctrl.shouldDisplayHint(apiGeneralForm.description)">
              Provide a description of your API, what it does, ...
            </div>
            <div ng-messages="apiGeneralForm.description.$error">
              <div ng-message="required">API Description is required.</div>
            </div>
          </md-input-container>
        </div>

        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Context-path</label>
            <input
              ng-model="$ctrl.parent.api.proxy.context_path"
              type="text"
              minlength="3"
              ng-pattern="/^\/[\/.a-zA-Z0-9-_]+$/"
              required
              name="contextPath"
              ng-change="$ctrl.parent.onChangeContextPath()"
            />
            <div class="hint" ng-if="$ctrl.shouldDisplayHint(apiGeneralForm.contextPath)">
              Path where API is exposed, must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore.
            </div>
            <div ng-messages="apiGeneralForm.contextPath.$error">
              <div ng-message="required">Context path is required.</div>
              <div ng-message="minlength">Context path has to be more than 3 characters long.</div>
              <div ng-message="pattern">
                Context path is not valid (must start with a '/' and must contain any letter, capitalize letter, number, dash or underscore)
              </div>
            </div>
          </md-input-container>
        </div>

        <div
          layout-gt-sm="row"
          ng-if="($ctrl.advancedMode && $ctrl.ApiPrimaryOwnerModeService.isHybrid() && $ctrl.parent.poGroups && $ctrl.parent.poGroups.length > 0) || $ctrl.ApiPrimaryOwnerModeService.isGroupOnly()"
        >
          <md-input-container ng-if="$ctrl.ApiPrimaryOwnerModeService.isHybrid()" class="md-block" flex-gt-sm>
            <md-switch ng-model="$ctrl.useGroupAsPrimaryOwner" aria-label="Use a group as primary owner" flex>
              Use a group as the primary owner
            </md-switch>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>Primary Owner Group</label>
            <md-select
              name="poGroupOwner"
              ng-model="$ctrl.parent.api.primaryOwner"
              ng-disabled="!$ctrl.useGroupAsPrimaryOwner"
              ng-required="$ctrl.ApiPrimaryOwnerModeService.isGroupOnly()"
            >
              <md-option ng-repeat="group in $ctrl.parent.poGroups" ng-value="{id: group.id, type: 'GROUP'}">{{group.name}}</md-option>
            </md-select>
            <div class="hint">Select the group that will be the primary owner</div>
            <div ng-messages="apiGeneralForm.poGroupOwner.$error">
              <div ng-message="required">
                A primary owner group is required. Check that you belong to at least one group with an API primary owner member.
              </div>
            </div>
          </md-input-container>
        </div>

        <div layout-gt-sm="row" ng-if="$ctrl.advancedMode && $ctrl.parent.attachableGroups && $ctrl.parent.attachableGroups.length > 0">
          <md-input-container class="md-block" flex-gt-sm>
            <label>Groups</label>
            <md-select ng-model="$ctrl.parent.api.groups" multiple>
              <md-option ng-repeat="group in $ctrl.parent.attachableGroups" ng-value="group">{{group.name}}</md-option>
            </md-select>
            <div class="hint">Groups that will be able to access the API.</div>
          </md-input-container>
        </div>

        <md-step-actions layout="row">
          <div flex>
            <md-button ng-click="$ctrl.parent.moveToPreviousStep()">CANCEL</md-button>
          </div>
          <div layout="row" flex layout-align="end top">
            <md-button type="submit" ng-disabled="apiGeneralForm.$invalid">NEXT</md-button>
          </div>
        </md-step-actions>
      </form>
    </md-content>
  </md-step-body>
</md-step>
